/**index.wxss**/
page {
  width: 100%;
}
.container {
  width: 100%;
}

.swiper-container {
  height: 400rpx;
}

.top-container {
  background-color: white;
  padding: 30rpx 30rpx 10rpx 30rpx;
  border-radius: 10px 10px 0 0;
  transform: translateY(-30rpx);
  width: calc(100%-60rpx);
}

.search-bar-container {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .location-selector {
    display: flex;
    align-items: center;
    justify-content: start;
    max-width: 150rpx;

    text {
      font-size: 30rpx;
      font-weight: 500;
      color: #0E0E0E;
      line-height: 44rpx;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    image {
      margin-left: 11rpx;
      width: 13rpx;
      height: 9rpx;
      line-height: 44rpx;
    }
  }

  .search-bar {
    flex: 1;
    margin-left: 28rpx;
    background: #F5F6F8;
    border: 1rpx solid #E4E6E7;
    border-radius: 20rpx;
    padding: 30rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    text {
      font-size: 28rpx;
      font-weight: 500;
      color: #828384;
      line-height: 28rpx;
    }

    image {
      width: 26rpx;
      height: 27rpx;
    }
  }
}

.hot-wrap {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: 48rpx;

  .more {
    width: 110rpx;
    height: 44rpx;
    background: #F5F6F8;
    border: 1px solid #E4E6E7;
    border-radius: 23rpx;
    display: flex;
    justify-content: center;
    align-items: center;

    text {
      font-size: 24rpx;
      font-weight: 400;
      color: #8E8E8E;
    }
    image {
      width: 9rpx;
      height: 15rpx;
      line-height: 26rpx;
      margin-left: 13rpx;
    }
  }

  text {
    font-size: 32rpx;
    font-weight: 500;
    color: #242424;
  }
}

.catalog-container {
  margin-top: 40rpx;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .catalog-item {
    width: 114rpx;
    height: 137rpx;
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      margin-top: 24rpx;
      height: 42rpx;
      width: auto;
    }

    text {
      margin-top: 14rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #262626;
    }
  }

  image {
    width: 114rpx;
    height: 137rpx;
  }
}

.product-container {
  padding: 30rpx;
  background-color: #F5F6F8;
  transform: translateY(-30rpx);

  .product-item {
    display: flex;
    flex-direction: row;
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 36rpx 30rpx;
    align-items: center;
    margin-bottom: 20rpx;

    .product-item-right {
      margin-left: 31rpx;
      height: 90rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;


      .product-item-title {
        display: flex;
        flex-direction: row;

        .product-item-badge {
          margin-left: 12rpx;
          background: linear-gradient(270deg, #C09F68, #F0D9A4);
          border-radius: 20rpx;
          font-size: 22rpx;
          font-weight: 400;
          color: #FFFFFF;
          padding: 0rpx 12rpx;
        }

        text {
          font-size: 28rpx;
          font-weight: 600;
          color: #262626;
          line-height: 34rpx;
        }
      }

      .product-item-subtitle {
        display: flex;
        flex-direction: row;


        .product-item-size {
          display: flex;
          flex-direction: row;
          align-items: center;

          .product-item-tag {
            margin-right: 14rpx;
            background: #F5F6F8;
            border-radius: 10rpx;
            padding: 0rpx 13rpx;
            line-height: 36rpx;

            text {
              font-size: 22rpx;
              font-weight: 500;
              color: #8E8E8E;
              line-height: 22rpx;
            }
          }

          text {
            font-size: 22rpx;
            font-weight: 500;
            color: #8E8E8E;
          }
        }
      }
    }

    image {
      width: 80rpx;
      height: 82rpx;
    }
    
  }
}

.empty-container {
  padding-top: 50rpx;
  background-color: white;
  transform: translateY(-30rpx);
  display: flex;
  align-items: center;
  flex-direction: column;

  image {
    width: 400rpx;
    height: 300rpx;
  }
  text {
    margin-top: 20rpx;
    margin-bottom: 60rpx;
    font-size: 28rpx;
    font-weight: 400;
    color: #828384;
  }
}